---
import { FaGithub } from "react-icons/fa6";
import "../styles/global.css";
import TopBar from "~/components/navigation/TopBar.astro";

interface Props {
  metadata?: {
    title?: string;
    description?: string;
    keywords?: string;
    author?: string;
  };
}

const { metadata } = Astro.props as Props;
---

<!doctype html>
<html lang="en" data-theme="wintry">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <meta name="generator" content={Astro.generator} />
    <title>{metadata?.title || "Spotube"}</title>
    <meta
      name="description"
      content={metadata?.description ||
        "A cross-platform extensible open-source music streaming platform"}
    />
    <meta
      name="keywords"
      content={metadata?.keywords ||
        "music, client, open source, music, streaming"}
    />
    <meta name="author" content={metadata?.author || "KRTirtho"} />
    <meta property="og:image" content="/images/spotube-logo.png" />
    <meta property="og:image:alt" content="Spotube Logo" />
    <meta property="og:image:type" content="image/png" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={metadata?.title || "Spotube"} />
    <meta
      name="twitter:description"
      content={metadata?.description ||
        "A cross-platform extensible open-source music streaming platform"}
    />
    <meta name="twitter:image" content="/images/spotube-logo.png" />
    <meta name="twitter:creator" content={metadata?.author || "KRTirtho"} />
    <meta name="twitter:site" content="@KRTirtho" />

    <meta name="robots" content="index, follow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#1DB954" />

    <script
      is:inline
      async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6419300932495863"
      data-overlays="bottom"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <main class="p-2 md:p-4 min-h-[90vh]">
      <TopBar />
      <slot />
    </main>
    <footer class="w-full bg-tertiary-100-900 p-4 flex justify-between">
      <div>
        <h3 class="h3">Spotube</h3>
        <p>
          Copyright © {new Date().getFullYear()} Spotube
        </p>
      </div>
      <ul>
        <li>
          <a href="https://github.com/KRTirtho/spotube">
            <FaGithub className="inline mr-1" />
            Github
          </a>
        </li>
        <li>
          <a href="https://opencollective.org/spotube">
            <img
              src="https://avatars0.githubusercontent.com/u/13403593?v=4"
              alt="OpenCollective"
              height="20"
              width="20"
              class="inline mr-1"
            />
            OpenCollective
          </a>
        </li>
      </ul>
    </footer>
  </body>
</html>

<style>
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
  }
</style>
